import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      areaValue: "你好， 这是在 text area 里的文本",
      selectValue: "coconut",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    console.log("提交的名字: " + this.state.value);
    console.log("提交的area: " + this.state.areaValue);
    console.log("提交的select: " + this.state.selectValue);
    event.preventDefault();
  }

  change2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };

  change3 = (e) => {
    // console.log(e.target.value);
    this.setState({
      selectValue: e.target.value,
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>

        <hr />

        <textarea
          value={this.state.areaValue}
          onChange={this.change2}
        ></textarea>

        <hr />

        <label>
          选择你喜欢的风味:
          <select value={this.state.selectValue} onChange={this.change3}>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>

        <hr />

        <input type="submit" value="提交" />
      </form>
    );
  }
}

export default App;
